// ES6 可以在编译时就完成模块加载，所以下面的写法没有任何问题，out导出后按照预期执行

import React from 'react'

// export  { InputBlur }; // 是可以导出的
// export default InputBlur // 是不可以导出的，原因是什么？
class InputBlur extends React.Component {
  render() {
    console.log("===>", this.props.name);
    return (
      <div>
        失去焦点{this.props.count}次
        <input onBlur={this.props.handleCount}></input>
      </div>
    );
  }
}

export default InputBlur


// const out = () => {
//   Parent()
// }

// const Parent = () => {
//   console.log( Child(12344) )
// };

// const Child = (props) => {
//   return props+1
// };

// // ===================

// // 如果是commonjs这样导出就会报错
// // module.exports =  { out };

// const out = () => {
//   Parent()
// }

// // 但是commonjs这样导出就不会报错
// // module.exports =  { out };

// const Parent = () => {
//   console.log( Child(12344) )
// };

// const Child = (props) => {
//   return props+1
// };


// // ======================

// // 如果不导出运行下面这段代码，会报错，找不到Child
// const Parent = () => {
//   console.log( Child(123) )
// };

// // 注意这里
// Parent()

// const Child = (props) => {
//   return props+1
// };